<template>
  <el-card>
    <!-- 普通数据使用props传参 -->
    <div class="card-title">{{ title }}</div>
    <div class="card-value">{{ value }}</div>
    <div class="card-wrap"><slot /></div>
    <!-- 带标签数据使用插槽，优先使用默认插槽 -->
    <div class="card-line"></div>
    <div class="card-footer"><slot name="footer" /></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CommonCard",
};
</script>

<script lang="ts" setup>
defineProps<{
  title: string;
  value: string;
}>();
</script>

<style scoped>
.cart-title {
  font-size: 12px;
  color: #999999;
}
.cart-value {
  font-size: 25px;
  margin: 10px 0;
}
.card-wrap {
  display: flex;
  align-items: center;
  height: 60px;
}
.card-line {
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}
.card-footer {
  font-style: 12px;
}
</style>
